<template>
  <div>
    <div class="Yanxuan_mime_top">
      <Headportrait />
      <p class="Yanxuan_mime_top_title" @click="Onclick" v-show="isDeng">
        立即登录
      </p>
      <p v-show="show" class="Yanxuan_mime_top_title_tt">Megumin</p>
      <p class="Yanxuan_mime_top_title" v-show="show" @click="Onback">
        退出登录
      </p>
      <p class="Yanxuan_mime_title">积分:0</p>
    </div>
    <van-notice-bar
      left-icon="volume-o"
      scrollable
      text="新上线更稳定的付费快递查询接口"
    />
    <div class="Yanxuan_mime"></div>
    <van-cell-group>
      <van-cell title="单元格" is-link>
        <template #title>
          <van-icon name="send-gift-o" />
          <span class="custom-title">我的订单</span>
        </template>
      </van-cell>
    </van-cell-group>

    <van-grid>
      <van-grid-item icon="paid" text="待付款" />
      <van-grid-item icon="send-gift-o" text="待发货" />
      <van-grid-item icon="logistics" text="待收货" />
      <van-grid-item icon="comment-o" text="待评价" />
    </van-grid>
    <div class="Yanxuan_mime"></div>

    <van-grid :column-num="3">
      <van-grid-item icon="gold-coin-o" text="我的余额" />
      <van-grid-item icon="edit" text="我的砍价" />
      <van-grid-item icon="coupon-o" text="我的礼券" />
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="location-o" text="我的地址" />
      <van-grid-item icon="service-o" text="联系客服" />
    </van-grid>
    <div class="Yanxuan_mime">The work of Megumin</div>
  </div>
</template>
<script>
import Headportrait from "../components/Headportrait/Headportrait";
export default {
  components: {
    Headportrait,
  },
  data() {
    return {};
  },
  computed: {
    isDeng() {
      var token = localStorage.getItem("token");
      if (token) {
        return false;
      } else {
        return true;
      }
    },
    show() {
      var token = localStorage.getItem("token");
      if (token) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    Onclick() {
      this.$router.push({
        path: "/login",
      });
    },
    Onback() {
      var aa = localStorage.removeItem("token");
      this.$router.push({
        path: "/Login",
      });
    },
  },
};
</script>
<style scoped>
.Yanxuan_mime {
  width: 100%;
  height: 1.4rem;
  background: rgb(245, 245, 245);
  text-align: center;
  font-size: 1rem;
  line-height: 1.4rem;
}
.Yanxuan_mime_top {
  width: 100%;
  height: 10rem;
  background: rgb(193, 177, 143);
}
.Yanxuan_mime_top_title {
  font-size: 1rem;
  font-weight: 600;
  position: absolute;
  top: 8em;
  left: 19rem;
  color: #ffffff;
}
.Yanxuan_mime_title {
  width: 4rem;
  height: 2rem;
  background: rgb(181, 163, 124);
  font-size: 1rem;
  text-align: left 0.1rem;
  color: #ffffff;
  line-height: 2rem;
  position: absolute;
  top: 5.5rem;
  left: 8.5rem;
  border-radius: 0.1rem;
}
.Yanxuan_mime_top_title_tt {
  font-size: 1.4rem;
  font-weight: 600;
  position: absolute;
  top: 3.5rem;
  left: 8.5rem;
  color: #ffffff;
}
</style>